import ReactDOM from "react-dom/client";
const root = ReactDOM.createRoot(document.querySelector("#root"));

//定义选项卡的序号
let tabIndex=0

//定义一个数组
const students = [
  {
    sid: "1001",
    sname: "张三",
    age: 24,
    telephone: "13326765432",
    address: "西安市凤城1路100号",
    status: 1,
    checked:true
  },
  {
    sid: "1002",
    sname: "李四",
    age: 25,
    telephone: "13226765432",
    address: "西安市凤城2路100号",
    status: 3,
    checked:false
  },
  {
    sid: "1003",
    sname: "王五",
    age: 24,
    telephone: "13326765431",
    address: "西安市凤城3路200号",
    status: 2,
    checked:true
  },
];
const teachers=[];
// const teachers = [
//   {
//     sid: "t1001",
//     sname: "张老师",
//     age: 34,
//     telephone: "13326765432",
//     address: "西安市凤城1路100号",
//     status: 1,
//     checked:true
//   },
//   {
//     sid: "t1002",
//     sname: "李老师",
//     age: 45,
//     telephone: "13226765432",
//     address: "西安市凤城2路100号",
//     status: 3,
//     checked:false
//   },
//   {
//     sid: "1003",
//     sname: "王老师",
//     age: 34,
//     telephone: "13326765431",
//     address: "西安市凤城3路200号",
//     status: 2,
//     checked:true
//   },
// ];

/**
 * React中实现列表的渲染采用的是数组map方法
 * React中实现条件渲染有三种方式
 * 1、if..else原生语法
 * 2、三元表达式来实现
 * 3、js的逻辑与运算符来实现
 */

const getStatus = (status) => {
  switch (status) {
    case 1:
      return "学习";
    case 2:
      return "毕业";
    case 3:
      return "休学";
    default:
      return "未知";
  }
};
const vNode1 = (
  <>
    <table>
      <thead>
        <tr>
          <th>序号</th>
          <th>学号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>电话</th>
          <th>地址</th>
          <th>状态</th>
        </tr>
      </thead>
      <tbody>
        {students.map((item, index) => (
          <tr key={item.sid}>
            <td>
              <input type="checkbox" checked={item.checked}></input>
            </td>
            <td>{item.sid}</td>
            <td>{item.sname}</td>
            <td>{item.age}</td>
            <td>{item.telephone}</td>
            <td>{item.address}</td>
            <td>
              {getStatus(item.status)}
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  </>
);

const vNode2 = (
  <>
    <table>
      <thead>
        <tr>
          <th>序号</th>
          <th>工号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>电话</th>
          <th>地址</th>
        </tr>
      </thead>
      <tbody>
        {teachers&&teachers.length>0&&teachers.map((item, index) => (
          <tr key={item.sid}>
            <td>
              <input type="checkbox" checked={item.checked}></input>
            </td>
            <td>{item.sid}</td>
            <td>{item.sname}</td>
            <td>{item.age}</td>
            <td>{item.telephone}</td>
            <td>{item.address}</td>
            
          </tr>
        ))}
      </tbody>
    </table>
  </>
);

if(tabIndex===0){
  root.render(vNode1);
}else if(tabIndex===1){
  root.render(vNode2);
}

